<template>
    <!--生命周期-->
    <p>当前数值：{{ sum }}</p>
    <button @click="add">累加</button>
</template>


<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from 'vue';
import useSum from '@/hooks/useSum'

const {sum, add} = useSum()

console.log('生命周期：创建')

onBeforeMount(()=>{
    console.log('生命周期：挂载前')
})

onMounted(()=>{
    console.log('生命周期：子---挂载完毕')
})

onBeforeUpdate(()=>{
    console.log('生命周期：更新前')
})

onUpdated(()=>{
    console.log('生命周期：更新完毕')
})

onBeforeUnmount(()=>{
    console.log('生命周期：卸载前')
})

onUnmounted(()=>{
    console.log('生命周期：卸载完毕')
})
</script>